<template>
  <view class="hotel-detail-page">
    <common-header
      :isCanBack="true"
      titleName=" "
      ref="commonHeader"
      :className="headerClassName"
    ></common-header>
    <view class="container" v-if="detailInfo.id">
      <view class="top_swiper">
        <swiper class="swiper">
          <swiper-item
            v-for="(item, index) in detailInfo.imgDetails || []"
            :key="index"
			@change="changeAct"
          >
            <view class="swiper-item">
              <image :src="img_baseUrl + item.url"></image>
            </view>
          </swiper-item>
        </swiper>
		<view class="swiper_dots">
			<view><text class="dot_now">{{showDot}}</text>/{{detailInfo.imgDetails.length}}</view>
		</view>
      </view>
      <view class="detail_wrap">
        <view class="titBox">
          <view class="titBox_lf">
            <text>{{ detailInfo.name }}</text>
            <view class="tit_item">
				<view v-if='detailInfo.showFeature.length'>
					<text v-for="feature in detailInfo.showFeature" :key="feature">{{feature}}</text>
			  </view>
            </view>
          </view>
          <!-- <view class="titBox_rt" :style="{backgroundImage: `url(${img_baseUrl}/statics/std/static/recom.png)`}">
            <text>{{ detailInfo.recValue }}</text>
          </view> -->
        </view>
        <view class="locBox_wrap">
          <view class="locBox" :style="{backgroundImage: `url(${img_baseUrl}/statics/std/static/introduction-detail-position-bg.png)`}">
            <view class="locBox_lf">
              <text>{{ detailInfo.address?detailInfo.address:"" }}</text>
              <view>{{ currDistance }}</view>
            </view>
            <view class="locBox_rt" @click="goToMap">
              <img :src="`${img_baseUrl}/statics/std/static/new/introduction-detail-position-location.png`" alt=""/>
              <!-- <text>去这里</text> -->
            </view>
          </view>
          <view class="phoneBox" @click="callPhone()">
            <text>联系酒店</text>
            <view class="phone">
              <text>拨打</text>
              <image
                :src="`${img_baseUrl}/statics/std/static/new/phone.png`"
              />
            </view>
          </view>
        </view>
        <view class="data_wrap" @click="onShowDatePicker">
          <text>入住日期</text>
          <text></text>
          <view>{{ checkStartTime | filterDate }}</view>
          <text>到</text>
          <view>{{ checkEndTime | filterDate }}</view>
		  <view class="zw"></view>
          <image
            :src="`${img_baseUrl}/statics/std/static/date.png`"
          ></image>
        </view>
        <view class="tabCon">
          <view class="sub">
            <view
              :class="['item', currentType == item.label ? 'sub_act' : '']"
              v-for="(item, index) in subTabs"
              :key="index"
              @click="changeType(item)"
              >{{ item.text }}
            </view>
          </view>
        </view>

        <view class="lists">
          <view
            class="con_item"
            v-for="(room, index) in roomList"
            :key="index"
            @click="showRoomInfo(room)"
          >
            <view class="item_lf_img">
              <image :src="img_baseUrl + room.imgAbbrev" />
            </view>
            <view class="item_rt">
              <text>{{ room.name }}</text>
              <view class="item_rt_mid">{{ room.foodDesc?room.foodDesc:"" }}</view>
              <view class="price_con">
                <image
                  :src="`${img_baseUrl}/statics/std/static/price.png`"
                  alt=""
                />
                <text class="price">{{ (room.price/100).toFixed(2) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="tabs" :style="{ top: tabStickyTop }">
        <v-tabs
          :tabs="tabs"
          @changeType="changeTap"
          :showMore="false"
          :selected="currentTab"
        />
      </view>
      <view class="discription" id="id1">
        <mp-html :content="detailInfo.content" style="font-size: 28rpx; color: #4d4d4d; line-height: 48rpx; font-weight: 400;"/>
      </view>
      <view class="policy-box" id="id2">
        <view class="title"> 酒店政策</view>
        <view class="label-box" v-if="detailInfo.checkInTime || detailInfo.checkOutTime">
          <image :src="`${img_baseUrl}/statics/std/static/hotel-time.png`" class="icon-label"></image>
          <view class="label-txt">入住时间</view>
        </view>
        <view class="label-value-box">
          <text class="label-value" style="padding-right: 48rpx"  v-if="detailInfo.checkInTime"
            >入住时间：{{ detailInfo.checkInTime }}以后
          </text>
          <text class="label-value"  v-if="detailInfo.checkOutTime"
            >离店时间：{{ detailInfo.checkOutTime }}以前
          </text>
        </view>
        <view class="label-box" v-if="detailInfo.receptionCrowd">
          <image
            :src="`${img_baseUrl}/statics/std/static/hotel-reception.png`"
            class="icon-label"
          ></image>
          <view class="label-txt">接待人群</view>
        </view>
        <view class="label-value-box" v-if="detailInfo.receptionCrowd">
          <text class="label-value">{{ detailInfo.receptionCrowd }}</text>
        </view>
        <view class="label-box" v-if='detailInfo.isChildren'>
          <image
            :src="`${img_baseUrl}/statics/std/static/hotel-children.png`"
            class="icon-label"
          ></image>
          <view class="label-txt">儿童及加床</view>
        </view>
        <view class="label-value-box" v-if="detailInfo.isChildren">
          <text class="label-value">{{ detailInfo.isChildren }}</text>
        </view>
        <view class="label-box" v-if="detailInfo.petReq">
          <image :src="`${img_baseUrl}/statics/std/static/hotel-pet.png`" class="icon-label"></image>
          <view class="label-txt">宠物</view>
        </view>
        <view class="label-value-box" v-if="detailInfo.petReq">
          <text class="label-value">{{ detailInfo.petReq }}</text>
        </view>
        <view class="label-box" v-if="detailInfo.toiletry">
          <image :src="`${img_baseUrl}/statics/std/static/hotel-xishu.png`" class="icon-label"></image>
          <view class="label-txt">洗漱用品</view>
        </view>
        <view class="label-value-box" v-if="detailInfo.toiletry">
          <text class="label-value">{{ detailInfo.toiletry }}</text>
        </view>
        <!-- <view class="label-box">
          <image
            :src="`${img_baseUrl}/statics/std/static/hotel-breakfast.png`"
            class="icon-label"
          ></image>
          <view class="label-txt">早餐</view>
        </view>
        <view class="label-value-box">
          <text class="label-value">{{ detailInfo.toiletry }}</text>
        </view> -->
        <view class="label-box" v-if="detailInfo.showPayMethods.length">
          <image
            :src="`${img_baseUrl}/statics/std/static/hotel-breakfast.png`"
            class="icon-label"
          ></image>
          <view class="label-txt">支付方式</view>
        </view>
        <view class="label-value-box pay" v-if="detailInfo.showPayMethods.length">
          <view
            class="flex-box w214 pb16"
            v-for="pay in detailInfo.showPayMethods"
            :key="pay"
          >
            <image class="icon-dui" :src="`${img_baseUrl}/statics/std/static/dui.png`"></image>
            <view class="label-value">{{ pay }}</view>
          </view>
        </view>
      </view>
      <view class="policy-box" id="id3">
        <view class="title"> 设施服务</view>
        <view class="label-box" v-if="detailInfo.showReceptionServices.length">
          <image
            :src="`${img_baseUrl}/statics/std/static/hotel-foreground.png`"
            class="icon-label"
          ></image>
          <view class="label-txt">前台服务</view>
        </view>
        <view class="label-value-box two" v-if="detailInfo.showReceptionServices.length">
          <view
            class="label-value two"
            v-for="service in detailInfo.showReceptionServices"
            :key="service"
          >
            {{ service }}
          </view>
        </view>
        <view class="label-box" v-if="detailInfo.showHealthServices.length">
          <image :src="`${img_baseUrl}/statics/std/static/hotel-kangti.png`" class="icon-label"></image>
          <view class="label-txt">康体设施</view>
        </view>
        <view class="label-value-box two" v-if="detailInfo.showHealthServices.length">
          <view
            class="label-value two"
            v-for="item in detailInfo.showHealthServices"
            :key="item"
          >
            {{ item }}
          </view>
        </view>
        <view class="label-box" v-if="detailInfo.showBusinessServices.length">
          <image
            :src="`${img_baseUrl}/statics/std/static/hotel-business.png`"
            class="icon-label"
          ></image>
          <view class="label-txt">商务服务</view>
        </view>
        <view class="label-value-box two" v-if="detailInfo.showBusinessServices.length">
          <view
            class="label-value two"
            v-for="item in detailInfo.showBusinessServices"
            :key="item"
          >
            {{ item }}
          </view>
        </view>
        <view class="label-box" v-if="detailInfo.showJiocServieces.length">
          <image
            :src="`${img_baseUrl}/statics/std/static/hotel-traffic.png`"
            class="icon-label"
          ></image>
          <view class="label-txt">交通服务</view>
        </view>
        <view class="label-value-box two" v-if="detailInfo.showJiocServieces.length">
          <view
            class="label-value two"
            v-for="item in detailInfo.showJiocServieces"
            :key="item"
          >
            {{ item }}
          </view>
        </view>
        <view class="label-box" v-if="detailInfo.showRestaurantServices.length">
          <image
            :src="`${img_baseUrl}/statics/std/static/hotel-catering.png`"
            class="icon-label"
          ></image>
          <view class="label-txt">餐饮服务</view>
        </view>
        <view class="label-value-box two" v-if="detailInfo.showRestaurantServices.length">
          <view
            class="label-value two"
            v-for="item in detailInfo.showRestaurantServices"
            :key="item"
          >
            {{ item }}</view
          >
        </view>
        <view class="label-box" v-if="detailInfo.showPublicServices.length">
          <image
            :src="`${img_baseUrl}/statics/std/static/hotel-general.png`"
            class="icon-label"
          ></image>
          <view class="label-txt">通用设施</view>
        </view>
        <view class="label-value-box two" v-if="detailInfo.showPublicServices.length">
          <view
            class="label-value two"
            v-for="item in detailInfo.showPublicServices"
            :key="item"
          >
            {{ item }}</view
          >
        </view>
      </view>
      <view class="policy-box" id="id4">
        <view class="title"> 预订须知</view>
        <view class="discription_pre">
          <!-- <mp-html :content="notices" /> -->
		  <text>{{notices}}</text>
        </view>
      </view>
    </view>
    <mx-date-picker
      :show="showPicker"
      :value="value"
      :show-tips="true"
      :begin-text="'入住'"
      :end-text="'离店'"
      :show-seconds="true"
      color="#3FAA73"
      @confirm="ed"
      @cancel="ed"
    />
    <!--      房间详情弹框-->
    <uni-popup
      ref="popup"
      type="bottom"
      :backgroundColor="'#ffffff'"
      :transStyle="{
        borderTopLeftRadius: '40rpx',
        borderTopRightRadius: '40rpx',
        overflow: 'hidden',
      }"
    >
      <view class="popup-content">
        <image
          class="popup-close"
          :src="`${img_baseUrl}/statics/std/static/delete2.png`"
          @click="closePopup"
        ></image>
        <view class="dishes-detail">
          <swiper class="detail-banner-swiper">
            <swiper-item v-for="img of roomInfo.imgDetails" :key="img.attaId">
              <image
                class="banner-item"
                :src="img_baseUrl + img.url"
                mode="aspectFill"
              />
            </swiper-item>
          </swiper>
          <view class="room-box">
            <view class="room-name">
              {{ roomInfo.name }}
            </view>
            <view class="room-flex-box">
              <view class="label-box room w50">
                <image
                  class="icon-label"
                  :src="`${img_baseUrl}/statics/std/static/room-mianji.png`"
                ></image>
                <view class="label-txt"
                  >{{ roomInfo.roomMinArea }}-{{ roomInfo.roomMaxArea }}m</view
                >
              </view>
              <view class="label-box room w50">
                <image
                  class="icon-label"
                  :src="`${img_baseUrl}/statics/std/static/room-chuang.png`"
                ></image>
                <view class="label-txt">{{ roomInfo.bedDesc?roomInfo.bedDesc:"" }}</view>
              </view>
              <view class="label-box room w50">
                <image
                  class="icon-label"
                  :src="`${img_baseUrl}/statics/std/static/room-youchuang.png`"
                ></image>
                <view class="label-txt">{{
                  roomInfo.windows == 1 ? "有窗" : "无窗"
                }}</view>
              </view>
              <view class="label-box room w50">
                <image
                  class="icon-label"
                  :src="`${img_baseUrl}/statics/std/static/hotel-reception.png`"
                ></image>
                <view class="label-txt">{{ roomInfo.personNum }}</view>
              </view>
              <view class="label-box room w50" v-if="roomInfo.wiredNet == 0 || roomInfo.wiredNet == 1">
                <image
                  class="icon-label"
                  :src="`${img_baseUrl}/statics/std/static/room-youxian.png`"
                ></image>
                <view class="label-txt">{{
                  roomInfo.wiredNet == 1 ? "有线" : "没有有线"
                }}</view>
              </view>
              <view class="label-box room w50" v-if='roomInfo.wirelessNet == 0 || roomInfo.wirelessNet == 1'>
                <image
                  class="icon-label"
                  :src="`${img_baseUrl}/statics/std/static/room-wuxian.png`"
                ></image>
                <view class="label-txt">{{
                  roomInfo.wirelessNet == 1 ? "没有无线" : "无线"
                }}</view>
              </view>
              <view class="label-box room w50" v-if="roomInfo.breakfast == 0 || roomInfo.breakfast == 1">
                <image
                  class="icon-label"
                  :src="`${img_baseUrl}/statics/std/static/hotel-catering.png`"
                ></image>
                <view class="label-txt">{{
                  roomInfo.breakfast == 1 ? "早餐" : "不含早餐"
                }}</view>
              </view>
            </view>
            <view class="room-name" v-if='roomInfo.roomDesc'> 房间描述 </view>
            <view v-if='roomInfo.roomDesc'>
              <view class="dish-info">
                <mp-html :content="roomInfo.roomDesc" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
import commonHeader from "@/components/commonHeader.vue";
import vTabs from "@/components/tabs.vue";
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html";
import { requestGet } from "@/utils/request";
import dayjs from "dayjs";
import {currentPosition, distance} from '@/utils/index.js';

export default {
  components: {
    commonHeader,
    vTabs,
    mpHtml,
    MxDatePicker,
  },
  props: ["id"],
  data() {
    return {
      tabStickyTop: "",
      img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
      headerClassName: "",
      currentTab: "1",
      currentType: "1",
      tabs: [
        {
          label: 1,
          text: "酒店简介",
        },
        {
          label: 2,
          text: "酒店政策",
        },
        {
          label: 3,
          text: "设施服务",
        },
        {
          label: 4,
          text: "预订须知",
        },
      ],
      roomList: [],
      subTabs: [],
      detailInfo: {
        content: "",
        notice: "",
      },
      roomInfo: {
        roomDesc: "",
      },
      showPicker: false,
      value: [dayjs().format("YYYY/MM/DD"),dayjs().add(1, 'day').format("YYYY/MM/DD")],
      currDistance: "",
      checkStartTime: dayjs(),
      checkEndTime: dayjs().add(1, 'day'),
	  notices: [],
	  showDot: 1
    };
  },
  mounted() {
    this.getDetail();
    this.getTapList();
    this.stickyTop();
  },
  filters: {
    filterDate: function (value) {
      if (!value) return "";
      return dayjs(value).format("MM月DD日");
    },
  },
  methods: {
	  changeAct(e) {
	  	this.showDot = e.detail.current
	  },
    stickyTop() {
      const height = this.$refs.commonHeader.height;
      const paddingTop = this.$refs.commonHeader.paddingTop;
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.tabStickyTopN = menuButtonInfo.height + menuButtonInfo.top + 17 / 2;
      this.tabStickyTop = `calc(${height} + ${paddingTop} + 17rpx)`;
    },
    getDetail() {
      requestGet(`/shop/mobile/hotel/${this.id}`)
        .then(({ code, data }) => {
          if (code == 200) {
            data.recValue = (+data.recValue)?.toFixed(1);
            data.showPayMethods = data.payMethods != '' && data.payMethods ? data.payMethods.split("@@") : [];
            data.showFeature = data.feature.indexOf('@@') !== -1 ? data.feature?.split("@@") : [];
            data.showReceptionServices =
              data.receptionServices?.split("@@") || [];
            data.showHealthServices = data.healthServices?.split("@@") || [];
            data.showBusinessServices =
              data.businessServices?.split("@@") || [];
            data.showJiocServieces = data.jiocServieces?.split("@@") || [];
            data.showRestaurantServices =
              data.restaurantServices?.split("@@") || [];
            data.showPublicServices = data.publicServices?.split("@@") || [];
            data.content = data && data.content ? data.content.split("\t").join("&nbsp;&nbsp;&nbsp;&nbsp;") : '';
            this.detailInfo = data;
            console.log('是店铺详情啊', this.detailInfo);
			this.notices = data.notice.replace(/↵/g, '\n')
			console.log('预定须知list', this.notices);
            this.getDistance();
          }
        })
        .catch((err) => console.log("错误了", err));
    },
    getRoomList() {
      requestGet(`/shop/mobile/hotel/room/list`, {
        hotelId: this.id,
        typeId: this.currentType,
      })
        .then((res) => {
          if (res.code == 200) {
            this.roomList = res.rows;
          }
        })
        .catch((err) => console.log("错误了", err));
    },
    getRoomDetail(id) {
      requestGet(`/shop/mobile/hotel/room/${id}`)
        .then(({ code, data }) => {
          if (code == 200) {
          console.log('获取了房间信息', data)
          data.roomDesc = data && data.roomDesc ? data.roomDesc.split("\t").join("&nbsp;&nbsp;&nbsp;&nbsp;") : '';
          this.roomInfo = data
            // data.recValue = (+data.recValue)?.toFixed(1);
            // data.showPayMethods = data.payMethods?.split("@@") || [];
            // data.showFeature = data.feature.indexOf('@@') !== -1 ? data.feature?.split("@@") : [];
            // data.showReceptionServices =
            //   data.receptionServices?.split("@@") || [];
            // data.showHealthServices = data.healthServices?.split("@@") || [];
            // data.showBusinessServices =
            //   data.businessServices?.split("@@") || [];
            // data.showJiocServieces = data.jiocServieces?.split("@@") || [];
            // data.showRestaurantServices =
            //   data.restaurantServices?.split("@@") || [];
            // data.showPublicServices = data.publicServices?.split("@@") || [];
            // this.detailInfo = data;
            // console.log('是店铺详情啊', this.detailInfo);
          }
        })
        .catch((err) => console.log("错误了", err));
    },
    getTapList() {
      requestGet(`/shop/mobile/hotel/room/searchType/${this.id}`)
        .then((res) => {
          if (res.code == 200) {
            res.data.forEach((item) => {
              item.label = item.id;
              item.text = item.typeName;
            });
            this.subTabs = res.data || [];
            if(this.subTabs.length > 0){
              this.currentType = this.subTabs[0].label;
              this.getRoomList();
            }
          }
        })
        .catch((err) => console.log("错误了", err));
    },
    onShowDatePicker() {
      //显示
      this.showPicker = true;
    },
    changeType(item) {
      this.currentType = item.label;
      this.getRoomList();
    },
    changeTap(e) {
      this.currentTab = e.type;
      const query = uni.createSelectorQuery().in(this);
      query
        .select(`#id${e.type}`)
        .boundingClientRect((data) => {
          console.log("得到布局位置信息" + data);
          console.log("节点离页面顶部的距离为" + data.top);
          uni.pageScrollTo({
            scrollTop: this.scrollTop + data.top - this.tabStickyTopN - 56,
          });
        })
        .exec();
    },
    closePopup() {
      this.$refs.popup.close();
    },
    showRoomInfo(item) {
      this.$refs.popup.open();
	  this.getRoomDetail(item.id)
    },
    callPhone() {
      if (!this.detailInfo.phone) {
        uni.showToast({
          title: "暂无联系电话",
          icon: "none",
        });
        return;
      }
      uni.makePhoneCall({
        phoneNumber: this.detailInfo.phone, //仅为示例
      });
    },
    ed(e) {
      //选择
      this.showPicker = false;
      if (e) {
        //选择的值
        console.log("value => " + e.value);
        this.checkStartTime = e.value[0];
        this.checkEndTime = e.value[1];
        this.value = e.value;
        //原始的Date对象
        console.log("date => " + e.date);
      }
    },
    onPageScroll(e) {
      console.log(e.scrollTop);
      this.scrollTop = e.scrollTop;
      if (e.scrollTop > 100) {
        this.headerClassName = "headerClass";
      } else {
        this.headerClassName = "";
      }
    },
    goToMap(){
      if(!this.detailInfo.latitude || !this.detailInfo.longitude || this.detailInfo.latitude == "" || this.detailInfo.longitude == ''){
        uni.showToast({
          title: "暂无具体位置信息",
          icon: "none",
        });
        return 
      }
      const detail = this.detailInfo;
      uni.openLocation({
      			latitude: Number(detail.latitude),
      			longitude: Number(detail.longitude),
            name: detail.name || '',
            address: detail.address || '',
      			success: function () {
      				console.log('openLocation=======success',detail);
      			},
            fail: function (res) {
              console.log('openLocation=====fail', res);
            }
      		});
    },
    async getDistance(){
       let myPosition = null;
       try {
         myPosition = await currentPosition();
       } catch (error) {
         console.log('定位失败:', error);
         return
       }
      console.log('myPositon=====', myPosition);
      if(myPosition.latitude && myPosition.longitude && this.detailInfo.latitude && this.detailInfo.longitude){
        distance(myPosition.latitude, myPosition.longitude,this.detailInfo.latitude,this.detailInfo.longitude).then(distance => {
          console.log("distance========", distance)
          this.currDistance = Number(distance) > 1000 ? (Number(distance)/1000).toFixed(2) + 'km' : distance + 'm';
        }).catch(err => {
          console.log("distance========err", res)
          this.currDistance = "";
        })
      }
    }
  },
};
</script>

<style lang="scss" scoped>
	.zw {
		flex: 1;
	}
.hotel-detail-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;

  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .top_swiper {
      position: relative;
	  .swiper_dots {
	  		  position: absolute;
	  		  bottom: 60rpx;
	  		  right: 32rpx;
	  		  background: rgba(0,0,0,0.6);
	  		  border-radius: 24rpx 24rpx 24rpx 24rpx;
	  		  view {
	  			  box-sizing: border-box;
	  			  padding: 4rpx 16rpx;
	  			  font-size: 24rpx;
	  			  font-weight: 400;
	  			  color: rgba(255,255,255,0.8);
	  			  line-height: 32rpx;
	  		  }
	  		  .now {
	  			  color: #FFFFFF;
	  		  }
	  }
      swiper.swiper {
        height: 440rpx;

        &::v-deep {
          .wx-swiper-dots {
            width: 100%;
            height: 120rpx;
            background: linear-gradient(
              180deg,
              rgba(0, 0, 0, 0) 0%,
              rgba(0, 0, 0, 0.16) 100%
            );
            padding-top: 52rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            bottom: 0;
          }

          .wx-swiper-dot {
            width: 20rpx;
            height: 4rpx;
            margin: 0 6rpx;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 10rpx;
            opacity: 1;

            &.wx-swiper-dot-active {
              background: #ffffff;
              opacity: 1;
            }
          }
        }
      }
      .swiper-item {
        display: block;
        height: 100%;
        width: 100%;
        line-height: 300rpx;
        text-align: center;

        image {
          display: block;
          height: 100%;
          width: 100%;
        }
      }
    }

    .detail_wrap {
      box-sizing: border-box;
      padding: 40rpx 32rpx 0;
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      transform: translateY(-40rpx);
      background: #fff;

      .titBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 34rpx;

        .titBox_lf {
          flex: 1;
          text {
            font-size: 40rpx;
            font-weight: 600;
            color: rgba(0,0,0,0.9);
            line-height: 56rpx;
          }

          .tit_item {
            margin-top: 16rpx;
            text {
              display: inline-block;
              box-sizing: border-box;
              padding: 4rpx 12rpx;
              height: 40rpx;
              background: rgba(77, 134, 247, 0.102);
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              font-size: 24rpx;
              font-weight: 400;
              color: #777f8f;
              line-height: 32rpx;
              margin-right: 12rpx;
              margin-bottom: 12rpx;
            }
          }
        }

        .titBox_rt {
          width: 108rpx;
          height: 108rpx;
          // background: url("https://ltjtjingquguanli.com/statics/std/static/recom.png")
            background-repeat: no-repeat;
          background-size: cover;
          font-size: 36rpx;
          font-family: D-DIN-Bold, D-DIN;
          font-weight: 700;
          color: #3FAA73;
          line-height: 40rpx;
          box-sizing: border-box;
          padding: 16rpx 30rpx 0;
        }
      }
      .locBox_wrap {
        width: 100%;
        display: flex;
      }
      .phoneBox {
        margin-left: 14rpx;
        box-sizing: border-box;
        padding: 24rpx 20rpx 0;
        width: 180rpx;
        height: 120rpx;
        background: linear-gradient(
          135deg,
          #edeff1 0%,
          #edeef1 36%,
          rgba(237, 238, 241, 0.72) 56%,
          rgba(237, 239, 241, 0.8) 100%
        );
        border-radius: 24rpx 24rpx 24rpx 24rpx;

        text {
          font-size: 28rpx;
          font-weight: 500;
          color: #5f6f86;
          line-height: 44rpx;
        }

        .phone {
          display: flex;
          align-items: center;

          text {
            font-size: 24rpx;
            font-weight: 400;
            color: #3FAA73;
            line-height: 40rpx;
          }

          image {
            width: 32rpx;
            height: 32rpx;
            display: flex;
            margin-left: 8rpx;
          }
        }
      }
      .data_wrap {
        display: flex;
        align-items: center;
        margin-top: 48rpx;

        text {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.5);
          line-height: 40rpx;
          margin-right: 24rpx;
        }

        view {
          font-size: 40rpx;
          font-weight: 700;
          color: rgba(0, 0, 0, 0.8);
          line-height: 56rpx;
          margin-right: 24rpx;
        }

        image {
          width: 40rpx;
          height: 40rpx;
          display: block;
          // margin-left: 38rpx;
        }
      }
      .locBox {
        width: calc(100% - 194rpx);
        height: 120rpx;
        border-radius: 24rpx;
        //background: url("https://ltjtjingquguanli.com/statics/std/static/introduction-detail-position-bg.png");
        background-size: cover;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 20rpx 24rpx 16rpx;

        .locBox_lf {
          margin-right: 20rpx;
          flex: 1;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;

          text {
            font-size: 28rpx;
            font-weight: 500;
            color: #5f6f86;
            line-height: 44rpx;
          }

          view {
            font-size: 24rpx;
            font-weight: 400;
            color: #777f8f;
            line-height: 40rpx;
          }
        }

        .locBox_rt {
          width: 64rpx;
          height: 64rpx;
          background: #ffffff;
          border-radius: 36rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          image {
            width: 32rpx;
            height: 32rpx;
            display: block;
          }

          text {
            font-size: 28rpx;
            font-weight: 400;
            color: #2187ff;
            line-height: 32rpx;
          }
        }
      }
      .tabCon {
        width: 100%;
        overflow-x: scroll;
		box-sizing: border-box;
		padding: 48rpx 0;

        &::-webkit-scrollbar {
          display: none;
        }

        .sub {
          display: flex;
          flex-wrap: nowrap;
          margin-bottom: 16rpx;

          .item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 56rpx;
            background: #F3F6F5;
            border-radius: 28rpx;
            border: 2rpx solid #B7CABF;
            box-sizing: border-box;
            padding: 8rpx 16rpx;
            background: rgba(77, 134, 247, 0.102);
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.7);
            margin-right: 16rpx;
            white-space: nowrap;
          }
		  .sub_act {
		  	background: #F3F6F5;
		  	border-radius: 28rpx;
		  	border: 2rpx solid #3FAA73;
		  	font-size: 28rpx;
		  	font-weight: 700;
		  	color: #3FAA73;
		  	line-height: 40rpx;
		  }
        }
      }
      .lists {
        width: 100%;

        .con_item {
          width: 100%;
          height: 160rpx;
          display: flex;
          margin-bottom: 48rpx;

          .item_lf_img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 16rpx;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
              display: block;
            }
          }

          .item_rt {
            width: calc(100% - 160rpx - 24rpx);
            margin-left: 24rpx;
            display: flex;
            flex-direction: column;

            text {
              font-size: 32rpx;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.8);
              line-height: 44rpx;
            }

            .item_rt_mid {
              font-size: 24rpx;
              font-weight: 400;
              color: #5f6f86;
              line-height: 32rpx;
              margin: 12rpx 0 28rpx;
            }

            .price_con {
              display: flex;

              image {
                width: 32rpx;
                height: 32rpx;
                display: block;
              }

              text {
                height: 44rpx;
                font-size: 40rpx;
                font-family: D-DIN-Bold, D-DIN;
                font-weight: 700;
                color: #ff7614;
                line-height: 44rpx;
              }
            }
          }
        }
      }
    }

    .tabs {
      position: sticky;
      top: 110rpx;
      box-sizing: border-box;
      padding: 16rpx 32rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
      background: #fff;
      z-index: 1;
    }

    .discription {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding: 24rpx;
    }
  }

  .popup-content {
    max-height: 80vh;
    position: relative;

    .popup-close {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      right: 24rpx;
      top: 24rpx;
      z-index: 1;
    }
    .room-name {
      font-size: 40rpx;
      font-weight: 700;
      color: #3d3d3d;
      line-height: 56rpx;
    }
    .room-box {
      padding: 32rpx;

      .room-flex-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
		margin-top: 32rpx;
      }
    }
    swiper.detail-banner-swiper {
      height: 360rpx;

      &::v-deep {
        .wx-swiper-dots {
          width: 100%;
          height: 120rpx;
          background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.16) 100%
          );
          padding-top: 52rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          bottom: 0;
        }

        .wx-swiper-dot {
          width: 20rpx;
          height: 4rpx;
          margin: 0 6rpx;
          background: rgba(255, 255, 255, 0.6);
          border-radius: 10rpx;
          opacity: 1;

          &.wx-swiper-dot-active {
            background: #ffffff;
            opacity: 1;
          }
        }
      }
    }

    .banner-item {
      width: 100%;
      height: 100%;
      display: block;
    }

    .dish-info {
      margin-top: 48rpx;
    }
  }

  .policy-box {
    padding: 0 24rpx 24rpx;
    .title {
      font-size: 32rpx;
      font-weight: 700;
      color: #3d3d3d;
      line-height: 44rpx;
      padding-bottom: 32rpx;
    }
	.discription_pre {
		width: 100%;
		height: auto;
		text {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0,0,0,0.7);
			line-height: 48rpx;
		}
	}
  }

  .label-box {
    display: flex;
    align-items: center;
    &.room {
      padding: 16rpx 0;
    }
    .icon-label {
      display: block;
      width: 32rpx;
      height: 32rpx;
      margin-right: 12rpx;
    }

    .label-txt {
      font-size: 28rpx;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.8);
      line-height: 40rpx;
    }
  }

  .label-value-box {
    padding: 16rpx 0 44rpx 40rpx;

    &.two {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 16rpx 44rpx 40rpx;
    }

    &.pay {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  }

  .label-value {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    line-height: 34rpx;

    &.two {
      padding-bottom: 16rpx;
      width: 50%;
    }
  }

  .w214 {
    width: 214rpx;
  }
  .w50 {
    width: 50%;
  }
  .pb16 {
    padding-bottom: 16rpx;
  }

  .icon-dui {
    display: block;
    width: 24rpx;
    height: 24rpx;
    margin-right: 4rpx;
  }
  .flex-box {
    display: flex;
    align-items: center;
  }
}
</style>
